feat: Add toolbar input select #1260

elnelson575 · 2025-11-17T21:06:13Z

Toolbar Input Selects should:

Be single select with selectize=False
Be slim enough to fit in a card header without altering the height
Use the default behavior for dropdowns
Have hover and select highlighting in light mode and in dark mode
Accomodate all methods of specifying choices

library(shiny)
library(bslib)

ui <- page_fillable(
  tags$head(
    tags$link(rel = "stylesheet", type = "text/css", href = "styles.css")
  ),
  card(
    card_header(
      "Card 1 header",
      toolbar(
        align = "right",
        shiny::downloadLink("download", "Download"),
        toolbar_input_select(
          id = "select",
          choices = c("Option 1", "Option 2", "Option 3"),
          selected = "Option 2"
        ),
        toolbar_input_select(
          id = "select_state",
          choices = list(
            `East Coast` = list("NY", "NJ", "CT"),
            `West Coast` = list("WA", "OR", "CA"),
            `Midwest` = list("MN", "WI", "IA")
          ),
          selected = "NY"
        ),
        input_dark_mode(id = "togglesm", class = "btn-xs border-0")
      )
    ),
    p("Card 1 body"),
    sliderInput("slider", "Slider", 0, 10, 5),
    max_height = "500px",
    card_footer(
      toolbar(
        align = "left",
        toolbar_input_select(
          id = "select_footer",
          choices = c("A" = "a", "B" = "b", "C" = "c"),
          selected = "B"
        )
      )
    )
  ),
  toolbar(
    align = "right",
    actionButton("test", NULL, icon = icon("calendar"), class = "btn-sm"),
    actionButton("test2", NULL, icon = icon("pencil"), class = "btn-sm")
  )
)

server <- function(input, output) {}


shinyApp(ui = ui, server = server)

Co-authored-by: Garrick Aden-Buie <garrick@adenbuie.com>

…slib into feat/toolbar-container

Co-authored-by: Garrick Aden-Buie <garrick@adenbuie.com>

…slib into feat/toolbar-container

Co-authored-by: Garrick Aden-Buie <garrick@adenbuie.com>

elnelson575 · 2025-11-24T21:57:48Z

inst/components/scss/card.scss

    flex-direction: row;
    align-items: center;
    align-self: stretch;
+    min-height: 2.5rem;


This is only to match what we currently have in the buttons PR

note: this includes both min-height and padding-block

elnelson575 · 2025-11-24T21:58:14Z

inst/components/scss/toolbar.scss

 .bslib-toolbar {
  display: flex;
  align-items: center;
+  gap: 0;


Same with these changes to toolbar.scss for the .bslib-toolbar (Also just to match what's in buttons)

gadenbuie · 2025-11-25T16:34:32Z

I'm not sure if the screenshot in the PR description reflects the current state, but my first reaction is that the horizontal padding feels imbalanced

gadenbuie · 2025-11-25T16:40:56Z

inst/components/scss/toolbar.scss

+  select {
+    appearance: auto;
+    padding-block: 3px; // Decreased to slim down select to fit in header
+    /* .form-controls takes away the drop-down arrow, this ensures it shows up */


I think I understand what this comment is saying, but I'm not sure. Some things to clarify:

Which .form-controls? Do you mean Bootstrap's rule, Shiny's rule, or another rule in bslib?

I'm pretty sure it refers to the drop-down arrow, but I'm not sure what this refers to. I think you could probably re-order this sentence a bit to avoid two adjacent implicit references.

gadenbuie · 2025-11-25T16:42:28Z

R/toolbar.R

+#' @param choices List of values to select from. If elements of the list are
+#'   named, then that name - rather than the value - is displayed to the user.
+#'   It's also possible to group related inputs by providing a named list whose
+#'   elements are (either named or unnamed) lists, vectors, or factors. In this
+#'   case, the outermost names will be used as the group labels (leveraging the
+#'   `<optgroup>` HTML tag) for the elements in the respective sublist.
+#' @param selected The initially selected value. If not specified then defaults
+#'   to the first value.
+#' @param width The width of the input, e.g. '400px', or '100%'; see
+#'   [validateCssUnit()].


This is probably sufficient; it looks like this documentation was copied from selectInput() anyway.

Suggested change

#' @param choices List of values to select from. If elements of the list are

#' named, then that name - rather than the value - is displayed to the user.

#' It's also possible to group related inputs by providing a named list whose

#' elements are (either named or unnamed) lists, vectors, or factors. In this

#' case, the outermost names will be used as the group labels (leveraging the

#' `<optgroup>` HTML tag) for the elements in the respective sublist.

#' @param selected The initially selected value. If not specified then defaults

#' to the first value.

#' @param width The width of the input, e.g. '400px', or '100%'; see

#' [validateCssUnit()].

#' @inheritParams shiny::selectInput

If you want to keep documentation local to toolbar_input_select() -- width might be one case -- you can keep the @param docs here.

gadenbuie · 2025-11-25T16:43:53Z

R/toolbar.R

+    class = "bslib-toolbar-input-select form-select-sm",
+    shiny::selectInput(
+      id,
+      label = NULL, # Removed for slimline input component


We probably need to keep label but use it for accessibility markup

gadenbuie · 2025-11-25T16:46:21Z

R/toolbar.R

+  width = NULL
+) {
+  htmltools::div(
+    class = "bslib-toolbar-input-select form-select-sm",


I think we might want to allow ..., check that they're all named arguments (i.e. they are all attributes), and then let people add attributes to the outer container.

Suggested change

width = NULL

) {

htmltools::div(

class = "bslib-toolbar-input-select form-select-sm",

width = NULL,

...

) {

rlang::check_dots_named()

htmltools::div(

class = "bslib-toolbar-input-select form-select-sm",

...,

gadenbuie · 2025-11-25T16:47:45Z

R/toolbar.R

+      selected = selected,
+      multiple = FALSE,
+      selectize = FALSE,
+      width = width


size = NULL is the default for selectInput() and usually I wouldn't include it here, but if it's set you get a very different select input so it's worth setting this to ensure it doesn't accidentally change on us later.

Suggested change

width = width

width = width,

size = NULL

elnelson575 and others added 30 commits November 3, 2025 11:02

Initial toolbar container

374f757

Updates

ed1a07e

Minor updates

04bd68b

Added tests

8f6d6f1

Updated news

6389307

Removing example:

c7d70e6

Adding snaps

3f8b630

Adding a few comments

1abed04

Update to toolbar testing

5fd9254

Fix dots in toolbar function

c2289a3

Co-authored-by: Garrick Aden-Buie <garrick@adenbuie.com>

updates to dots

b23fc17

Merge branch 'feat/toolbar-container' of https://github.com/rstudio/b…

d2eb240

…slib into feat/toolbar-container

Update R/toolbar.R

0836374

Co-authored-by: Garrick Aden-Buie <garrick@adenbuie.com>

Update inst/components/scss/toolbar.scss

a55d03f

Co-authored-by: Garrick Aden-Buie <garrick@adenbuie.com>

Update inst/components/scss/toolbar.scss

0afabf4

Co-authored-by: Garrick Aden-Buie <garrick@adenbuie.com>

Update inst/components/scss/toolbar.scss

e6e9d88

Co-authored-by: Garrick Aden-Buie <garrick@adenbuie.com>

Merge remote-tracking branch 'origin/main' into feat/toolbar-container

478f5e1

Merge remote-tracking branch 'origin/main' into feat/toolbar-container

0340d21

Updated code

f898670

minor formatting changes

899b644

Adding footer back

6a3ccfe

Docs changes

88f00d8

Updating footer, updating tests

df309bf

chore: air format tests/testthat/test-toolbar.R

68b7006

Merge 'origin/main' into branch feat/toolbar-container

3a9b59e

Spacing

12db810

Merge branch 'feat/toolbar-container' of https://github.com/rstudio/b…

10ba431

…slib into feat/toolbar-container

Updating comments

87cbf1d

Adding select

9c04578

Removed select formatting to be addressed in select input PR

6be96cb

elnelson575 and others added 13 commits November 17, 2025 11:03

Add dark/light mode support

6371c2f

Update tests/testthat/test-toolbar.R

d16f727

Co-authored-by: Garrick Aden-Buie <garrick@adenbuie.com>

Update tests/testthat/test-toolbar.R

3d7d9f0

Co-authored-by: Garrick Aden-Buie <garrick@adenbuie.com>

Updated tests

3cc95fe

Updating formatting

d9a5bf0

Removed size arg

d3dd5c3

Formatting updates

e8da8d9

Working through input tests

606c7d0

Merging in epic branch

2e7dc65

Merging

183d8af

Merging in changes and editing

2ceb201

Remove sample apps

8171052

Updating to fix tests and fix input select spacing

03f9e8f

elnelson575 changed the title ~~Feat/toolbar input select~~ feat: Add toolbar input select Nov 24, 2025

elnelson575 marked this pull request as ready for review November 24, 2025 21:57

elnelson575 requested a review from gadenbuie November 24, 2025 21:57

elnelson575 commented Nov 24, 2025

View reviewed changes

elnelson575 added 3 commits November 24, 2025 16:58

Delete testapp.R

eda7660

Update header format in bs-theme-preset-builtin.md

5479ad3

Update markdown headers for consistency

1e68375

gadenbuie reviewed Nov 25, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Add toolbar input select #1260

feat: Add toolbar input select #1260

Uh oh!

elnelson575 commented Nov 17, 2025 •

edited

Loading

Uh oh!

elnelson575 Nov 24, 2025

Uh oh!

gadenbuie Nov 25, 2025

Uh oh!

elnelson575 Nov 24, 2025

Uh oh!

gadenbuie commented Nov 25, 2025

Uh oh!

gadenbuie Nov 25, 2025

Uh oh!

gadenbuie Nov 25, 2025

Uh oh!

gadenbuie Nov 25, 2025

Uh oh!

gadenbuie Nov 25, 2025

Uh oh!

gadenbuie Nov 25, 2025

Uh oh!

gadenbuie Nov 25, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

feat: Add toolbar input select #1260

Are you sure you want to change the base?

feat: Add toolbar input select #1260

Uh oh!

Conversation

elnelson575 commented Nov 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gadenbuie commented Nov 25, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

elnelson575 commented Nov 17, 2025 •

edited

Loading